// import React, { useState } from 'react';

interface ChapterTitleProps {
  english: string;
  chinese: string;
  chapterNumber: string;
  onScrollToBookmark?: () => void;
  hasBookmark?: boolean;
}

export const ChapterTitle: React.FC<ChapterTitleProps> = ({ english, chinese, chapterNumber, onScrollToBookmark, hasBookmark }) => {
  // const [showTranslation, setShowTranslation] = useState(false);

  return (
    <div className="mb-8 px-6 pt-6">
      <div className="flex items-center justify-between mb-4">
        <h1 className="text-3xl">
          <span className="font-bold">{chapterNumber}</span>
          <span className="mx-2">·</span>
          <span className="font-bold">{english}</span>
        </h1>
        {hasBookmark && (
          <button 
            onClick={onScrollToBookmark}
            className="bg-green-500 hover:bg-green-600 text-white px-4 py-1 rounded-full text-sm transition-colors duration-200"
          >
            当前段落
          </button>
        )}
      </div>
      <div className="mb-4">
        <h2 className="text-lg text-gray-600 mt-2">{chinese}</h2>
      </div>
    </div>
  );
};